<!-- 轮播图管理已完成 -->
<template>
  <div id="template">
    <page-main>
      <avue-crud
        :option="Main_Option"
        :search.sync="Main_search"
        :data="Main_Data"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @reset-change="resetChange"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <!-- <template slot="image" slot-scope="{ row }">
          <el-image
            style="width: 110px; height: 70px;"
            :src="row.image"
            fit="fill"
          ></el-image>
        </template> -->

        <!-- 轮播图插槽 -->
        <template v-slot:image="{ row }">
          <el-image
            v-if="row.image"
            :src="row.image"
            style="width: 100px; height: 60px;"
          ></el-image>
          <span v-else>暂无轮播图</span>
        </template>
      </avue-crud>
    </page-main>
  </div>
</template>
  
<script>
import { Main_Option, Main_Data } from "./config";

import {
  queryCarouselsApi,
  updateCarouselsApi,
  deleteCarouselsApi,
  createCarouselsApi,
} from "@/api/carouselsManage/index";

export default {
  data() {
    return {
      Main_Option,
      Main_Data,
      main_table_loading: false,
      Main_Form: {},
      Main_search: {},
      Main_Page: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
    };
  },
  mounted() {
    this.getHomePageInfoFunc();
  },
  methods: {
    // 搜索事件
    async searchChange(params, done) {
      this.Main_Page.currentPage = 1;
      this.Main_Page.pageSize = 10;
      await this.getHomePageInfoFunc();
      done();
    },
    currentChange(val) {
      this.Main_Page.currentPage = val;
      this.getHomePageInfoFunc();
    },

    sizeChange(val) {
      this.Main_Page.pageSize = val;
      this.getHomePageInfoFunc();
    },
    // 重置
    resetChange() {
      this.Main_search = {};
    },
    // 刷新
    refreshChange() {
      this.Main_Page.currentPage = 1;
      this.getHomePageInfoFunc();
    },

    rowSave(form, done, loading) {
      const { title, image, type, status } = form;

      this.createCarouselsApiFunc(
        { title, image, type, status },
        done,
        loading
      );
    },

    rowUpdate(row, index, done, loading) {
      const { id, title, image, type, status } = row;
      this.updateCarouselsApiFunc(
        { id, title, image, type, status },
        done,
        loading
      );
    },

    rowDel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCarouselsApiFunc({ id: row?.id ?? "" });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    /**
     * @name requests
     * @author --h28
     */
    // 获取主页
    async getHomePageInfoFunc() {
      this.main_table_loading = true;
      const response = await queryCarouselsApi({
        ...this.Main_search,
        currentPage: this?.Main_Page?.currentPage ?? 1,
        pageSize: this?.Main_Page?.pageSize ?? 10,
      }).catch(() => {});

      if (response?.code === 200) {
        this.Main_Data = response?.data?.records ?? [];
        this.Main_Page.total = response?.data?.total ?? 0;
      }
      this.main_table_loading = false;
    },
    // 新增
    async createCarouselsApiFunc(data, done, loading) {
      const response = await createCarouselsApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "新增成功" });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },
    // 编辑
    async updateCarouselsApiFunc(data, done, loading) {
      const response = await updateCarouselsApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "编辑成功" });
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },
    // 删除
    async deleteCarouselsApiFunc(data) {
      const loadding = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const response = await deleteCarouselsApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "删除成功" });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
      }
      loadding.close();
    },
  },
};
</script>
  
    <!-- <style>
  
    </style> -->
  